<script lang="ts" setup>
import { addArchive, getArchiveList } from '@/api/archiveapi';
import { computed, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
//@ts-ignore
import ExportJsonExcel from 'js-export-excel'
const role = ref(true)
const active = ref(false)
const dialogVisible = ref(false)
const currentPage = ref(1)

const tableData = ref([])
function hrefClick() {
    window.location.reload()
}

onMounted(() => {
    getArchiveList().then(res => {
        tableData.value = res.data
    })
})

const formData = computed(() => {
    return tableData.value.slice((currentPage.value - 1) * 10, (currentPage.value - 1) * 10 + 10)
})


const file = ref('')
const size = ref('')
const date = new Date()
const currentTime = date.toLocaleDateString()


function AddClick() {
    addArchive({
        file: file.value,
        size: size.value,
        date: currentTime
    }).then(res => {
        tableData.value = res.data
        dialogVisible.value = false
        ElMessage({
            message: '添加成功',
            type: 'success',
            plain: true,
        })
        file.value = ''
        size.value = ''

    })
}

function downloadClick() {
    // 2. 创建导出的 option 配置对象
    let option: any = { fileName: '所有文件导出' }

    // 3. 配置工作表导出内容
    option.datas = [
        {
            // 4. 配置需要导出的数据源
            sheetData: tableData.value,
            // 5. 设置导出的工作表名称
            sheetName: '市区工程一览',
            // 6. 配置导出哪些字段
            sheetFilter: ['file', 'size', 'date'],
            // 7. 配置导出后表头的名称
            sheetHeader: ['文件名称', '文件大小', '文件更新时间'],
            // 8. 配置每列的宽度
            columnWidths: [10, 20, 30, 40]
        }
    ]


    // 9. 通过配置的对象创建一个 excel 文件
    const toExcel = new ExportJsonExcel(option)

    // 10. 将创建的文件保存在本地
    toExcel.saveExcel()
}

</script>

<template>
    <div class="archive">
        <el-dialog v-model="dialogVisible" title="新建" width="500">
            <el-input placeholder="请输入文件名称" v-model="file"></el-input>
            <el-input placeholder="请输入文件大小" style="margin: 20px 0;" v-model="size"></el-input>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="AddClick">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>


        <header class="archive-header">
            <div class="header-left">
                <span style="color: #999;font-size: 16px;">档案管理</span>
            </div>
            <div class="header-right">
                <el-button @click="hrefClick">刷新</el-button>
                <el-button @click="$router.go(-1)">返回</el-button>
            </div>
        </header>

        <main class="archive-main">
            <header class="archive-main-header">
                <div class="archive-main-header-left">
                    <span @click="active = true">所有角色</span>

                    <span>名称排序</span>
                    <span>我的关注</span>
                    <span>文件筛选</span>
                    <input type="text" placeholder="请输入关键词">
                </div>
                <div :class="{ role, active }" @mouseleave="active = false">
                    <p>所有角色</p>
                    <p>我创建的</p>
                    <p>我参与的</p>
                </div>
                <div class="archive-main-header-right">
                    <el-button @click="dialogVisible = true">新建</el-button>
                    <el-button type="primary">新建文件</el-button>
                </div>
            </header>

            <div class="archive-main-content">
                <div class="header">
                    <div class="left"><span style="color: #666;font-size: 14px;">全部文件</span></div>
                    <div class="right">
                        <span>分享</span>
                        <span @click="downloadClick">下载</span>
                        <span>关注</span>
                        <span>重命名</span>
                        <span>复制</span>
                        <span>移动</span>
                        <span>删除</span>
                    </div>
                </div>

                <div class="content">
                    <el-table :data="formData" style="width: 100%">
                        <el-table-column type="index" label="序号" header-align="center" align="center" width="80">
                            <template #default="scope">
                                <b>{{ (currentPage - 1) * 10 + (scope.$index) + 1 }}</b>
                            </template>
                        </el-table-column>
                        <el-table-column prop="file" label="文件" header-align="center" align="center" />
                        <el-table-column prop="size" label="文件大小" header-align="center" align="center" />
                        <el-table-column prop="date" label="更新时间" header-align="center" align="center" />
                    </el-table>

                    <el-pagination size="small" background layout="prev, pager, next" :total="tableData.length"
                        v-model:current-page="currentPage" />
                </div>
            </div>
        </main>
    </div>
</template>


<style lang="scss" scoped>
.archive {
    width: 100%;
    height: 100%;

    .archive-header {
        width: 100%;
        height: 50px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-left {

            margin-left: 20px;
        }

        .header-right {
            margin-right: 20px;
        }
    }

    .archive-main {
        width: 95%;
        margin: 20px auto;

        .archive-main-header {
            width: 100%;
            height: 100px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px auto;

            .archive-main-header-left {
                span {
                    width: 100px;
                    height: 35px;
                    padding: 10px;
                    border: 1px solid #999;
                    margin: 0 10px;
                    color: #999;
                    cursor: pointer;
                    user-select: none;

                }

                span:hover {
                    background-color: #409EFF;
                    color: white;

                }

                input {
                    widows: 240px;
                    height: 35px;
                    border-radius: 35px;
                    border: 1px solid #999;
                    padding-left: 20px;
                }

                input:focus {
                    outline: none;
                    border: 1px solid #409EFF;
                }
            }

            .archive-main-header-right {
                margin-right: 20px;
            }

            .role {
                width: 87px;
                height: 100px;
                background-color: white;
                z-index: 99;
                position: relative;
                right: 795px;
                top: 74px;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                color: #999;
                display: none;

                p {
                    line-height: 30px;
                }

                p:hover {
                    background-color: rgb(223, 223, 223);

                }


            }

            .active {
                display: block;
            }



        }

        .archive-main-content {
            width: 100%;

            .header {
                width: 100%;
                height: 60px;
                background-color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    margin-left: 20px;
                }

                .right {
                    margin-right: 20px;

                    span {
                        width: 80px;
                        height: 35px;
                        display: inline-block;
                        border: 1px solid #999;
                        text-align: center;
                        line-height: 35px;
                        margin-left: 20px;
                        color: #999;
                        font-size: 14px;
                    }

                    span:hover {
                        background-color: #409EFF;
                        color: white;

                    }
                }
            }
        }
    }

}
</style>